<template>
  <view class="carry-wrap">
    <h-skeleton v-if="loading"></h-skeleton>
    <h-empty
      style="height: calc(100% - 200rpx)"
      v-if="(!arr || !arr.length) && !loading"
      text="暂无携行用户"
      icon="http://cdn.uviewui.com/uview/empty/list.png">
    </h-empty>
    <view class="carry-ul" v-else-if="arr.length && !loading">
      <view class="li" @tap="goHerf(item.user_id)" v-for="item in arr">
        <view class="li-left">
          <image :src="item.avatar_url?item.avatar_url:avatar_default"></image>
        </view>
        <view class="li-right">
          <view class="box">
            <view class="title">昵称：</view>
            <view class="txt">{{item.nick_name}}</view>
          </view>
          <view class="box">
            <view class="title">年龄：</view>
            <view class="txt">{{item.age}}</view>
          </view>
          <view class="box">
            <view class="title">性别：</view>
            <view class="txt">{{item.gender==1?'男':'女'}}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-wrap" v-if="!loading">
      <button class="add-btn" @tap="goCarryUserRegister">创建携行用户</button>
    </view>
    <h-toast></h-toast>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import {
  request,
} from '../../utils/http.js';
export default {
  data() {
    return {
      arr: [],
      avatar_default: require('./static/img/default-pic.png'),
      loading: true
    }
  },
  onShow() {
    this.initList()
  },
  methods: {
    //初始list
    initList() {
      this.loading = true
      request('/user/carried/list', {
        with_health: 1
      }).then(res => {
        this.arr = res?.datas?.users || [];
        this.loading = false
      }).catch(err => {
        err && Taro.hToast({
          message: err
        })
        this.loading = false
      })
    },

    goHerf(id) {
      Taro.navigateTo({
        url: '/pages/carryUserDetail/index?id=' + id,
      })
    },
    goCarryUserRegister() {
      Taro.navigateTo({
        url: '/pages/carryUserRegister/index',
      })
    },

  },
}
</script>

<style lang="less">
.carry-wrap {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background: #f3f3f7;
  font-size: 32rpx;
  .carry-ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;

    .li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 260rpx;
      line-height: 260rpx;
      background: #fff;
      margin: 10rpx 0;
      padding: 0 20rpx;
      width: 96%;
      border-radius: 30rpx;
      box-sizing: border-box;

      .li-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 30%;

        // .txt {
        // 	margin-left: 15rpx;
        // 	font-size: 28rpx;
        // }
        image {
          width: 180rpx;
          height: 180rpx;
        }
      }

      .li-right {
        height: 100%;
        flex: 1;
        padding-left: 20rpx;
        box-sizing: border-box;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: flex-start;

        .box {
          width: 100%;
          height: 20%;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .title {
            font-weight: bold;
            color: #505050;
            font-size: 28rpx;
          }

          .txt {
            margin-left: 0;
            font-size: 28rpx;
          }
        }
      }
    }
  }

  .add-btn {
    box-sizing: border-box;
    margin-top: 20rpx;
    border: none;
    width: 90%;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20rpx;
    color: #fff;
    font-size: 28rpx;
    font-weight: 400;
    background: linear-gradient(to right, #d5ad57, #cfb58a);
  }
}
</style>
